import React, { Component } from 'react'
import './index.css';
export default class Slider extends Component {
    state = {
        imgs: [
            '/images/1.jpg',
            '/images/2.jpg',
            '/images/3.jpg',
            '/images/4.jpg',
            '/images/5.jpg',
        ],
        index: 0
    }

    render() {
        //获取状态
        let {imgs, index} = this.state;
        return (
            <div className="slider-container">
                <div className="big-image">
                    <img src={imgs[index]} alt="" />
                </div>
                <ul className="small-images">
                    {
                        this.state.imgs.map((item, i) => {
                            return <li className={i === index ? 'active' : ''} key={i} onMouseEnter={this.mouseover(i)}>
                                <img src={item} alt="" />
                            </li>
                        })
                    }
                </ul>
            </div>
        )
    }

    mouseover = (i) => {
        return e => {
            //设置
            this.setState({
                index: i
            })
        }
        
    }
}
